<template>
  <div class="shoppingmall">
    <!-- 标题 -->
    <h1 style="font-size: 24px;margin-bottom:12px;margin-top: 0px;">我的收藏</h1>
    <div class="sub_common_box">
      <div class="product-grid">
        <div v-for="(product, productIndex) in paginatedProducts" :key="productIndex" class="item_card" v-if="product.image">
          <img :src="product.image" alt="" />
          <div>{{ product.name }}</div>
          <div class="details_btn" @click="handleDetails(product)">了解详情</div>
        </div>
      </div>
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      style="text-align: right;margin-top: 12px;"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalInquiries">
    </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'select_brand',
  data() {
    return {
      products: [
        { id: 1, image: require("@/assets/itemIcon/001.jpg"), name: "独立水箱奶瓶清洗消毒机" },
        { id: 2, image: require("@/assets/itemIcon/002.jpg"), name: "独立水箱奶瓶清洗消毒机" },
        { id: 3, image: require("@/assets/itemIcon/003.jpg"), name: "独立水箱奶瓶清洗消毒机" },
        { id: 4, image: require("@/assets/itemIcon/004.jpg"), name: "独立水箱奶瓶清洗消毒机" },
        { id: 5, image: require("@/assets/itemIcon/005.jpg"), name: "独立水箱奶瓶清洗消毒机" },
        { id: 6, image: require("@/assets/itemIcon/006.jpg"), name: "独立水箱奶瓶清洗消毒机" },
        { id: 7, image: require("@/assets/itemIcon/001.jpg"), name: "独立水箱奶瓶清洗消毒机" },
        { id: 8, image: require("@/assets/itemIcon/002.jpg"), name: "独立水箱奶瓶清洗消毒机" },
        { id: 9, image: require("@/assets/itemIcon/003.jpg"), name: "独立水箱奶瓶清洗消毒机" },
        { id: 10, image: require("@/assets/itemIcon/004.jpg"), name: "独立水箱奶瓶清洗消毒机" },
        { id: 11, image: require("@/assets/itemIcon/005.jpg"), name: "独立水箱奶瓶清洗消毒机" },
        { id: 12, image: require("@/assets/itemIcon/006.jpg"), name: "独立水箱奶瓶清洗消毒机" },
        { id: 13, image: require("@/assets/itemIcon/003.jpg"), name: "独立水箱奶瓶清洗消毒机" },
        { id: 14, image: require("@/assets/itemIcon/004.jpg"), name: "独立水箱奶瓶清洗消毒机" },
        { id: 15, image: require("@/assets/itemIcon/005.jpg"), name: "独立水箱奶瓶清洗消毒机" },
        { id: 16, image: require("@/assets/itemIcon/006.jpg"), name: "独立水箱奶瓶清洗消毒机" },
        { id: 17, image: require("@/assets/itemIcon/001.jpg"), name: "独立水箱奶瓶清洗消毒机" },
        { id: 18, image: require("@/assets/itemIcon/002.jpg"), name: "独立水箱奶瓶清洗消毒机" },
      ],
      currentPage: 1,
      pageSize: 20, // 修改: 将每页显示的商品数量改为20
      totalInquiries: 10
    };
  },
  computed: {
    paginatedProducts() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.products.slice(start, end);
    },
  },
  methods: {
    handleSizeChange(newSize) {
      this.pageSize = newSize;
    },
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
    },
    handleDetails(product) {
      // 这里预留查看详情的逻辑
      const newPageUrl = "/home/itemDetail?id="+Math.fround(Math.random()*9999);
      window.open(newPageUrl, '_blank');
    },
  },
};
</script>

<style scoped>
.item_card {
  width: 170px;
  height: 240px;
  background-color: var(--color-common-f2);
  margin: 0 auto;
  border-radius: 8px;
  font-size: 14px;
  color: #666666;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}
.item_card:hover {
  transform: translateY(-5px);
}
.item_card div {
  text-align: center;
}
.item_card img {
  width: 150px;
  height: 150px;
  margin: 5px 10px;
  border-radius: 8px;
}
.details_btn {
  width: 100px;
  height: 24px;
  line-height: 24px;
  margin: 8px auto;
  text-align: center;
  font-size: 14px;
  background-color: var(--color-base);
  color: var(--color-common-ff);
  border: 1px solid var(--color-base);
  border-radius: 15px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}
.details_btn:hover {
  background-color: #fff;
  color: var(--color-base);
}
.sub_common_box {
  margin: 0 auto;
  width: 100%;
  background-color: var(--color-common-ff);
}
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
</style>